import { connect } from "react-redux";
import { getHome } from "../action/action";
import { Nav } from "../components/Nav/nav";
import { Discover } from './../components/Discover/discover';
import { Allrec } from './../components/AllRec/allRec';
import { Daily } from './../components/Daily/daily';
import { Switch } from 'react-router-dom';
import { Route } from 'react-router-dom';
import { Redirect } from 'react-router-dom';
import { Foot } from './../components/Footer/foot';

class HomeUI extends React.Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        this.props.init();
    }
    render() {
        let { navList, footList } = this.props
        return (
            <div className="box">
                <header><Nav navList={navList} /></header>
                <main>
                    <Switch>
                        <Redirect from="/home" exact={true} to="/home/allRec" />
                        <Route path="/home/discover" component={Discover} />
                        <Route path="/home/allRec" component={Allrec} />
                        <Route path="/home/daily" component={Daily} />
                    </Switch>
                </main>
                <footer><Foot footList={footList} /></footer>
            </div>
        )
    }
}
let mstp = ({ home }) => home;
let mdtp = (dispatch) => {
    return {
        init() {
            dispatch(getHome())
        }
    }
}
export let Home = connect(mstp, mdtp)(HomeUI)